<template>
  <div>
    <div class="vertical-align-flex">
      <div class="field">{{pages[3].field}}：</div>
      <div class="value">
        <div :class="['switch', {'switch-off': false}] "></div>
      </div>
    </div>
    <div class="view-table mb20">
      <div class="table-title">
        {{pages[3].info.title}}:
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w80">
          <col class="w100">
          <col class="w80">
          <col class="w50">
          <col class="w50">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in pages[3].info.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td v-for="n in 4">
              <input type="text" class="input-none bottom-line text-center input-cell" />
              </td>
              <!-- <td><el-select class="select-cell"></el-select></td> -->
              <td><span class="add">{{$t('operate.add')}}</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {

  data(){
    return {
      pages: this.$t('advanced.pages'),
    }
  },
  created(){
    this.$bus.emit("changeTab", 3)
  },
  activated(){
    this.$bus.emit("changeTab", 3)
  }
}
</script>